<template>
	<view class="equipment">
		<device-filter @getDeviceList="getDeviceList" @getSearchList="getSearchList" @changeType="changeType">
			<template slot="popup">
				<view class="search-device-box" v-for="(item,index) in searchList" :key="index">
					<view class="search-device" hover-class="clickable" @click="selectDevice(0,item)">
						<view class="device-des">
							<view class="device-des-top">{{item.name}}</view>
							<view class="device-des-bottom">{{item.aname}}</view>
						</view>
					</view>
				</view>
			</template>
			<template slot="right">
				<view class="device-box-right-item" v-for="(item,index) in deviceList" :key="index">
					<view class="device-box-right-item-hover" hover-class="clickable" @click="selectDevice(1,item)">
						<!-- <view class="device-img">
							<image :src="item.img" mode=""></image>
						</view> -->
						<view class="device-des">
							<view class="device-des-top">{{item.name}}</view>
							<view class="device-des-bottom">{{item.aname}}</view>
						</view>
					</view>
				</view>
			</template>
		</device-filter>
	</view>
</template>

<script>
	import _custom from '../../../../common/_custom.js'
	import moment from 'moment'
	import _data from '../../../../common/_data.js'
	import DeviceFilter from '@/components/custom/device-filter/device-filter.vue'
	import {sendBackFunction} from '@/common/custom_util.js';
	
	export default {
		components: {
			DeviceFilter
		},
		data() {
			return {
				deviceList: [],
				searchList: [],
				type: '',
				param: '1',//1：设备台账，2：创建表单
			}
		},
		onLoad(options) {
			options.param ? this.param = options.param : '';
		},
		onUnload() {
			
		},
		methods: {
			getDeviceList(v) {
				this.deviceList = v
			},
			getSearchList(v) {
				this.searchList = v
			},
			changeType(v) {
				this.type = v
			},
			selectDevice(i,v) {
				let data = {}
				if(i == 0) {
					data = {
						device: v.device,
						devicecode: v.aname,
						...v
					}
				} else {
					data = {
						device: this.type,
						devicecode: v.aname,
						...v
					}
				}
				switch(this.param) {
					case '1':
						uni.navigateTo({
							url: './device?data=' + JSON.stringify(data)
						})
						break;
					case '2':
						sendBackFunction('getDevice',data);
						break;
				}
				
			}
		}
	}
</script>

<style>
	.equipment {
		height: 100vh;
	}
	
	.search-device-box {
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}
	
	.search-device {
		padding: 20rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
	}
	
	.device-box-right-item {
		background-color: #fff;
		margin-bottom: 20rpx;
	}
	
	.device-box-right-item-hover {
		height: 100rpx;
		font-size: 30rpx;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
	}
	
	.device-radio {
		width: 60rpx;
	}
	
	.device-img {
		width: 100rpx;
		height: 100rpx;
		margin: 0 10rpx;
	}
	
	.device-img > image {
		width: 100%;
		height: 100%;
	}
	
	.device-img > view {
		width: 100%;
		height: 100%;
		background-color: #eee;
		font-size: 25rpx;
		text-align: center;
		line-height: 100rpx;
	}
	
	.device-des {
		margin-left: 20rpx;
	}
	
	.device-des-top {
		font-size: 25rpx;
		line-height: 40rpx;
	}
	
	.device-des-bottom {
		font-size: 25rpx;
		line-height: 40rpx;
	}
</style>